<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>基本信息</h3>
      <el-form ref="goods" :model="goods" label-width="180px">
        <el-form-item label="商品类型" prop="goodsSn">
          <el-tag size="50"> 普通商品</el-tag>
        </el-form-item>

        <el-form-item label="商品大类">
          <el-select v-model="goods.categoryName" clearable>
            <el-option
              :key="goods.categoryId"
              :label="goods.categoryName"
              :value="goods.categoryId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="商品分组">
          <el-select v-model="goods.groupId" clearable>
            <el-option
              v-for="item in brandList"
              :key="item.groupId"
              :label="item.groupName"
              :value="item.groupId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="本店商品分类">
          <el-cascader
            v-model="catId"
            :options="listArr"
            @change="handleChangeCatId"
          ></el-cascader>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <h3>商品信息</h3>
      <el-form
        ref="ruleForm"
        v-model="goods"
        label-width="100px"
        class="demo-ruleForm"
        size="30"
      >
        <el-form-item label="商品名称" prop="name" style="width: 500px">
          <el-input v-model="goods.name"></el-input>
        </el-form-item>

        <el-form-item label="商品价格" prop="price" style="width: 500px">
          <el-input placeholder="请输入内容" v-model="goods.price">
            <template slot="prepend">￥</template>
          </el-input>
        </el-form-item>

        <el-form-item label="计量" prop="metering" style="width: 500px">
          <el-input placeholder="请输入内容" v-model="goods.metering">
            <template slot="append">斤/ML</template>
          </el-input>
        </el-form-item>

        <el-form-item
          label="兑换积分"
          prop="name"
          style="width: 500px"
          :required="false"
          v-if="this.$route.query.productId === ''"
        >
          <div class="demo-input-size">
            <el-input placeholder="兑换积分">
              <template slot="prepend">积分</template>
            </el-input>
            +
            <el-input placeholder="兑换价格">
              <template slot="prepend">价格</template>
            </el-input>
          </div>
        </el-form-item>

        <el-form-item label="商品主图" prop="image">
          <el-upload
            :action="uploadPath"
            :limit="5"
            :headers="headers"
            :on-exceed="uploadOverrun"
            :on-success="handleGalleryUrl"
            :on-remove="handleRemove"
            multiple
            accept=".jpg,.jpeg,.png,.gif"
            list-type="picture-card"
          >
            <img v-if="goods.image" :src="goods.image" class="avatar" />
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>

        <el-form-item label="商品详细介绍">
          <editor :init="editorInit" v-model="goods.pcDesc" />
        </el-form-item>

        <el-form-item label="商品库存" prop="quantity" style="width: 500px">
          <el-input v-model="goods.quantity"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <h3>商品库存/规格</h3>
      <el-row :gutter="20" type="flex" align="middle" style="padding: 20px 0">
        <el-col :span="10">
          <el-radio-group v-model="multipleSpec" @change="specChanged">
            <el-radio-button :label="false">默认标准规格</el-radio-button>
            <el-radio-button :label="true">多规格支持</el-radio-button>
          </el-radio-group>
        </el-col>

        <el-col v-if="multipleSpec" :span="10">
          <el-button
            :plain="true"
            type="primary"
            @click="handleSpecificationShow"
            >添加
          </el-button>
        </el-col>
      </el-row>

      <el-table :data="specifications">
        <el-table-column property="specification" label="规格名" />

        <el-table-column property="value" label="规格值">
          <template slot-scope="scope">
            <el-tag type="primary">
              {{ scope.row.value }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column property="picUrl" label="规格图片">
          <template slot-scope="scope">
            <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40" />
          </template>
        </el-table-column>

        <el-table-column property="reserve" label="库存" />

        <el-table-column
          v-if="multipleSpec"
          align="center"
          label="操作"
          width="250"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              @click="handleSpecificationDelete(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="specVisiable" title="设置规格">
        <el-form
          ref="specForm"
          :model="specForm"
          status-icon
          label-position="left"
          label-width="100px"
          style="width: 400px; margin-left: 50px"
        >
          <el-form-item label="规格名" prop="specification">
            <el-input v-model="specForm.specification" />
          </el-form-item>
          <el-form-item label="规格值" prop="value">
            <el-input v-model="specForm.value" />
          </el-form-item>
          <!-- <el-form-item label="规格图片" prop="picUrl">
            <el-upload
              :action="uploadPath"
              :show-file-list="false"
              :headers="headers"
              :on-success="uploadSpecPicUrl"
              class="avatar-uploader"
              accept=".jpg,.jpeg,.png,.gif"
            >
              <img
                v-if="specForm.picUrl"
                :src="specForm.picUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="specVisiable = false">取消</el-button>
          <el-button type="primary" @click="handleSpecificationAdd"
            >确定
          </el-button>
        </div>
      </el-dialog>
    </el-card>

    <el-card class="box-card">
      <h3>快递物流/其他</h3>
      <el-form label-width="180px">
        <el-form-item label="是否为推荐商品">
          <el-radio v-model="goods.platformRecommend" :label="1">是</el-radio>
          <el-radio v-model="goods.platformRecommend" :label="0">否</el-radio>
        </el-form-item>

        <el-form-item label="描述" prop="goodsDesc">
          <el-input style="width: 300px" v-model="goods.goodsDesc"></el-input>
        </el-form-item>

        <el-form-item label="是否预约商品">
          <el-radio v-model="goods.isReservation" :label="1">是</el-radio>
          <el-radio v-model="goods.isReservation" :label="2">否</el-radio>
        </el-form-item>

        <el-form-item label="要求留言:">
          <el-form-item
            v-for="(domain, index) in dynamicValidateForm.domains"
            :key="domain.key"
            :prop="'domains.' + index + '.value'"
          >
            <el-card class="box-card">
              <el-form :inline="true" class="demo-form-inline">
                <el-input style="width: 70px" value="留言"></el-input>

                <el-select v-model="value" placeholder="请选择活动区域">
                  <el-option
                    v-for="item in goodsLiuyan"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  ></el-option>
                </el-select>
                <el-button @click.prevent="removeDomain(domain)" type="danger"
                  >删除
                </el-button>
              </el-form>
            </el-card>
          </el-form-item>
          <el-button type="primary" @click="addDomain">+添加字段</el-button>
        </el-form-item>

        <el-form-item label="开售时间">
          <el-radio v-model="goods.soldTime" :label="0">立即开售</el-radio>
          <el-radio v-model="goods.soldTime" label="">定时开售</el-radio>

          <el-date-picker
            v-model="goods.soldTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="有无保修">
          <el-radio v-model="goods.warranty" label="0">无</el-radio>
          <el-radio v-model="goods.warranty" label="1">有</el-radio>
        </el-form-item>
        <el-form-item label="仅到店自提">
          <template>
            <el-radio v-model="goods.isZiti" :label="1">是</el-radio>
            <el-radio v-model="goods.isZiti" :label="0">否</el-radio>
          </template>
        </el-form-item>

        <el-form-item label="是否自动上架">
          <template>
            <el-radio v-model="goods.isTimeChangeStatus" :label="1"
              >是
            </el-radio>
            <el-radio v-model="goods.isTimeChangeStatus" :label="0"
              >否
            </el-radio>
            <!--                        &lt;!&ndash; `checked` 为 true 或 false &ndash;&gt;-->
            <!--                        <el-checkbox v-model="goods.isTimeChangeStatus"-->
            <!--                                     :checked2="goods.isTimeChangeStatus === 1? 'true':'false' ">开启-->
            <!--                        </el-checkbox>-->
          </template>
          <el-date-picker
            v-if="goods.isTimeChangeStatus === 1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="是否包邮">
          <el-radio v-model="goods.freePostage" :label="0">不包邮</el-radio>
          <el-radio v-model="goods.freePostage" :label="1"> 包邮</el-radio>
        </el-form-item>

        <el-form-item label="发货地" prop="setSendAddress">
          <span>{{ goods.setSendAddress }}</span>
          <el-button
            v-if="goods.setSendAddress == null"
            type="primary"
            v-model="goods.setSendAddress"
            @click="setSendAddress"
            >设置发货地
          </el-button>
          <el-button
            v-else
            type="primary"
            v-model="goods.setSendAddress"
            @click="setSendAddress"
            >修改
          </el-button>
        </el-form-item>

        <el-form-item label="发票">
          <el-radio v-model="goods.invoice" label="1">有</el-radio>
          <el-radio v-model="goods.invoice" label="2">无</el-radio>
        </el-form-item>
      </el-form>
    </el-card>
    <!--        设置发货地拟态框-->
    <el-dialog
      title="设置发货地"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-cascader
        style="min-width: 300px"
        size="large"
        :options="options"
        v-model="goods.setSendAddress"
        @change="handleChange"
      >
      </el-cascader>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handlePublish">修改</el-button>
    </div>
  </div>
</template>

<style>
.el-card {
  margin-bottom: 10px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.avatar-uploader .el-upload {
  width: 145px;
  height: 145px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 145px;
  height: 145px;
  display: block;
}

.demo-input-size {
  display: flex;
}
</style>

<script>
import { regionData, CodeToText } from "element-china-area-data";
import {
  publishGoods,
  editGoods,
  detailGoods,
  listCatAndBrand,
  listGrouping,
} from "@/api/goods";
import { createStorage, uploadPath } from "@/api/storage";
import Editor from "@tinymce/tinymce-vue";
import { MessageBox } from "element-ui";
import { getToken } from "@/utils/auth";

export default {
  name: "GoodsRelease",
  components: { Editor },

  data() {
    return {
      catId: undefined,
      options: regionData,
      uploadPath, //图片上传地址
      newKeywordVisible: false,
      newKeyword: "",
      keywords: [],
      categoryList: [],
      listArr: [], //商品分类列表
      brandList: [], //商品分组列表
      dialogVisible: false, //发货地你拟态框
      // 是否自动上架
      checked1: null,
      checked2: null,
      radio: "1",
      // 留言格式
      goodsLiuyan: [
        { label: "文本格式", value: "1" },
        { label: "单选", value: "2" },
        { label: "数字格式", value: "3" },
        { label: "邮件格式", value: "4" },
        { label: "日期", value: "5" },
        { label: "时间", value: "6" },
        { label: "身份证号码", value: "7" },
        { label: "图片", value: "8" },
      ],

      // 动态添加会员特权绑定对象
      dynamicValidateForm: {
        domains: [],
        email: "",
      },
      // goods: {picUrl: '', gallery: [], isHot: false, isNew: true, isOnSale: true},
      goods: {
        name: "",
        price: "",
        groupId:"",
        groupIds:"",
        metering: "",
        quantity: "",
        categoryId: 0,
        storeCategoryId: null,
        weight: "100", //重量
        isTimeChangeStatus: undefined, //是否自动上下架
        soldTime: undefined, //出售时间
        setSendAddress: null, //设置发货地址
        platformRecommend: undefined, //是否推荐商品
        isZiti: undefined, //是否自提
        isReservation: undefined, //是否是预约商品
        warranty: "", //是否保修
        freePostage: undefined, //是否包邮费
        invoice: "", //发票
        productSkuList: [
          {
            price: null,
            quantity: null,
            weight: null,
            supplyPrice: null,
            primeCostPrice: null,
            code: null,
            productPropertyList: [],
          },
        ],
      },
      specVisiable: false,
      specForm: { specification: "", value: "", picUrl: "" },
      multipleSpec: false,
      specifications: [
        { specification: "规格", value: "标准", picUrl: "", reserve: "" },
      ],
      productVisiable: false,
      productForm: {
        id: 0,
        specifications: [],
        price: 0.0,
        number: 0,
        url: "",
      },
      products: [
        { id: 0, specifications: ["标准"], price: 0.0, number: 0, url: "" },
      ],
      attributeVisiable: false,
      attributeForm: { attribute: "", value: "" },
      attributes: [],
      // rules: {
      //   // goodsSn: [
      //   //   { required: true, message: "商品编号不能为空", trigger: "blur" },
      //   // ],
      //   price: [
      //     { required: true, message: "商品价格不能为空", trigger: "blur" },
      //   ],
      //   metering: [
      //     { required: true, message: "商品计量不能为空", trigger: "blur" },
      //   ],
      //   name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
      //   quantity: [
      //     { required: true, message: "库存不能为空", trigger: "blur" },
      //   ],
      // },
      editorInit: {
        language: "zh_CN",
        height: 500,
        convert_urls: false,
        plugins: [
          "advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount",
        ],
        toolbar: [
          "searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample",
          "hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen",
        ],
        images_upload_handler: function (blobInfo, success, failure) {
          const formData = new FormData();
          formData.append("file", blobInfo.blob());
          createStorage(formData)
            .then((res) => {
              success(res.data.data);
            })
            .catch(() => {
              failure("上传失败，请重新上传");
            });
        },
      },
    };
  },
  computed: {
    headers() {
      return {
        token: getToken(),
      };
    },
  },
  created() {
    this.init();
  },

  methods: {
    //本店商品分类
    handleChangeCatId(value) {
      console.log(value);
      this.catId = value[0];
    },
    // 发货地址返回值
    handleChange(value) {
      if (value[1] != null && value[2] != null) {
        var dz =
          CodeToText[value[0]] +
          "/" +
          CodeToText[value[1]] +
          "/" +
          CodeToText[value[2]];
      } else {
        if (value[1] != null) {
          dz = CodeToText[value[0]] + "/" + CodeToText[value[1]];
        } else {
          dz = CodeToText[value[0]];
        }
      }
      this.goods.setSendAddress = dz;
      this.dialogVisible = false;
    },
    // 分类次级联动
    kindChange() {
      console.log(123);
    },
    // 设置发货地拟态框
    setSendAddress() {
      this.dialogVisible = true;
    },
    // 动态添加表单
    addDomain() {
      // this.itemType =true;
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now(),
      });
    },
    // 删除会员特权表格
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    // 获取数据函数
    init: function () {
      // 列表分类数据
      listCatAndBrand().then((res) => {
        console.log("列表分类", res);
        res.data.data.forEach((element) => {
          let option = {
            value: element.catId,
            label: element.catName,
          };
          if (element.childCategory.length !== 0) {
            const children = [];
            element.childCategory.forEach((item) => {
              children.push({
                value: item.catId,
                label: item.catName,
              });
            });
            option.children = children;
          }
          this.listArr.push(option);
        });
      });
      console.log("分类列表", this.listArr);
      listGrouping().then((res) => {
        console.log("分组列表", res);
        this.brandList = res.data.data.records;
      });
      const goodsId = this.$route.query.productId;
      detailGoods(goodsId).then((response) => {
        console.log(response.data.data);
        if (response.data.data.productSkuList[0]) {
          if (
            response.data.data.productSkuList[0].productPropertyList[0].name ===
            "规格"
          ) {
            this.multipleSpec = false;
          } else {
            this.multipleSpec = true;
            let arr = [];
            response.data.data.productSkuList[0].productPropertyList.forEach(
              (x) => {
                arr.push({
                  specification: x.name,
                  value: x.productPropertyValue.value,
                  picUrl: "",
                  reserve: "",
                });
              }
            );
            this.specifications = arr;
          }
        }

        this.goods = response.data.data;
        this.catId = response.data.data.categoryIds
          ? response.data.data.categoryIds[0]
          : null;
      });
    },
    handleCategoryChange(value) {
      this.goods.categoryId = value[value.length - 1];
    },
    handleCancel: function () {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/goods/list" });
    },
    handlePublish: function () {
      // this.goods.storeCategoryId = this.catId[1]
      this.goods.storeCategoryId = this.catId;
      if (this.goods.productSkuList.length == 0) {
        this.goods.productSkuList = [
          {
            price: null,
            quantity: null,
            weight: null,
            supplyPrice: null,
            primeCostPrice: null,
            code: null,
            productPropertyList: [],
          },
        ];
      }
      this.goods.groupIds = this.goods.groupId;
      this.goods.productSkuList[0].price = +this.goods.price;
      this.goods.productSkuList[0].quantity = +this.goods.quantity;
      this.goods.productSkuList[0].weight = +this.goods.weight;
      let arr = [];
      this.specifications.forEach((x) => {
        arr.push({
          name: x.specification,
          productPropertyValue: {
            value: x.value,
            image: "",
          },
        });
      });
      this.goods.productSkuList[0].productPropertyList = arr;
      editGoods(this.goods)
        .then((response) => {
          this.$notify.success({
            title: "成功",
            message: "创建成功",
          });
          this.$router.push({ path: "/goods/list" });
        })
        .catch((response) => {
          MessageBox.alert("业务错误：" + response.data.errmsg, "警告", {
            confirmButtonText: "确定",
            type: "error",
          });
        });
    },
    handleClose(tag) {
      this.keywords.splice(this.keywords.indexOf(tag), 1);
      this.goods.keywords = this.keywords.toString();
    },
    showInput() {
      this.newKeywordVisible = true;
      this.$nextTick((_) => {
        this.$refs.newKeywordInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      const newKeyword = this.newKeyword;
      if (newKeyword) {
        this.keywords.push(newKeyword);
        this.goods.keywords = this.keywords.toString();
      }
      this.newKeywordVisible = false;
      this.newKeyword = "";
    },
    uploadPicUrl: function (response) {
      this.goods.picUrl = response.data.url;
    },
    // 商品主图方法
    uploadOverrun: function () {
      this.$message({
        type: "error",
        message: "上传文件个数超出限制!最多上传5张图片!",
      });
    },
    handleGalleryUrl(response, file, fileList) {
      if (response.errno === 0) {
        this.goods.gallery.push(response.data.url);
      }
    },
    handleRemove: function (file, fileList) {
      for (var i = 0; i < this.goods.gallery.length; i++) {
        // 这里存在两种情况
        // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
        //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
        // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
        var url;
        if (file.response === undefined) {
          url = file.url;
        } else {
          url = file.response.data.url;
        }

        if (this.goods.gallery[i] === url) {
          this.goods.gallery.splice(i, 1);
        }
      }
    },

    specChanged: function (label) {
      if (label === false) {
        this.specifications = [
          { specification: "规格", value: "标准", picUrl: "" },
        ];
        this.products = [
          { id: 0, specifications: ["标准"], price: 0.0, number: 0, url: "" },
        ];
      } else {
        this.specifications = [];
        this.products = [];
      }
    },
    // 规格图片
    uploadSpecPicUrl: function (response) {
      this.specForm.picUrl = response.data.url;
    },
    handleSpecificationShow() {
      this.specForm = { specification: "", value: "", picUrl: "" };
      this.specVisiable = true;
    },
    handleSpecificationAdd() {
      var index = this.specifications.length - 1;
      for (var i = 0; i < this.specifications.length; i++) {
        const v = this.specifications[i];
        if (v.specification === this.specForm.specification) {
          if (v.value === this.specForm.value) {
            this.$message({
              type: "warning",
              message: "已经存在规格值:" + v.value,
            });
            this.specForm = {};
            this.specVisiable = false;
            return;
          } else {
            index = i;
          }
        }
      }

      this.specifications.splice(index + 1, 0, this.specForm);
      this.specVisiable = false;

      this.specToProduct();
    },
    handleSpecificationDelete(row) {
      const index = this.specifications.indexOf(row);
      this.specifications.splice(index, 1);
      this.specToProduct();
    },
    specToProduct() {
      if (this.specifications.length === 0) {
        return;
      }
      // 根据specifications创建临时规格列表
      var specValues = [];
      var spec = this.specifications[0].specification;
      var values = [];
      values.push(0);

      for (var i = 1; i < this.specifications.length; i++) {
        const aspec = this.specifications[i].specification;

        if (aspec === spec) {
          values.push(i);
        } else {
          specValues.push(values);
          spec = aspec;
          values = [];
          values.push(i);
        }
      }
      specValues.push(values);

      // 根据临时规格列表生产货品规格
      // 算法基于 https://blog.csdn.net/tyhj_sf/article/details/53893125
      var productsIndex = 0;
      var products = [];
      var combination = [];
      var n = specValues.length;
      for (var s = 0; s < n; s++) {
        combination[s] = 0;
      }
      var index = 0;
      var isContinue = false;
      do {
        var specifications = [];
        for (var x = 0; x < n; x++) {
          var z = specValues[x][combination[x]];
          specifications.push(this.specifications[z].value);
        }
        products[productsIndex] = {
          id: productsIndex,
          specifications: specifications,
          price: 0.0,
          number: 0,
          url: "",
        };
        productsIndex++;

        index++;
        combination[n - 1] = index;
        for (var j = n - 1; j >= 0; j--) {
          if (combination[j] >= specValues[j].length) {
            combination[j] = 0;
            index = 0;
            if (j - 1 >= 0) {
              combination[j - 1] = combination[j - 1] + 1;
            }
          }
        }
        isContinue = false;
        for (var p = 0; p < n; p++) {
          if (combination[p] !== 0) {
            isContinue = true;
          }
        }
      } while (isContinue);

      this.products = products;
    },
    handleProductShow(row) {
      this.productForm = Object.assign({}, row);
      this.productVisiable = true;
    },
    uploadProductUrl: function (response) {
      this.productForm.url = response.data.url;
    },
    handleProductEdit() {
      for (var i = 0; i < this.products.length; i++) {
        const v = this.products[i];
        if (v.id === this.productForm.id) {
          this.products.splice(i, 1, this.productForm);
          break;
        }
      }
      this.productVisiable = false;
    },
    handleAttributeShow() {
      this.attributeForm = {};
      this.attributeVisiable = true;
    },
    handleAttributeAdd() {
      this.attributes.unshift(this.attributeForm);
      this.attributeVisiable = false;
    },
    handleAttributeDelete(row) {
      const index = this.attributes.indexOf(row);
      this.attributes.splice(index, 1);
    },
  },
};
</script>
